<template>
  <BasicContainer>
    <el-card header="默认配置">
      <YsTable :data="data" :page="page" :column="column" @row-add="rowAdd" @row-del="rowDel" @row-edit="rowEdit"
        @current-change="currentChange" @size-change="sizeChange" />
    </el-card>

    <div class="mb20" />
    <el-card header="带斑马纹表格">
      <YsTable :data="data" :page="page" :option="ZebraPrintOpt" :column="column" @row-add="rowAdd" @row-del="rowDel"
        @row-edit="rowEdit" @current-change="currentChange" @size-change="sizeChange" />
    </el-card>

    <div class="mb20" />
    <el-card header="带状态表格">
      <YsTable :data="data" :page="page" :option="StatusOpt" :column="column" @row-add="rowAdd" @row-del="rowDel"
        @row-edit="rowEdit" @current-change="currentChange" @size-change="sizeChange" />
    </el-card>

  </BasicContainer>

</template>

<script setup lang="ts">
import type { YsTableColumn, YsTableOption, YsPageType } from "ys-crud/packages/Table"
import { computed, ref } from 'vue';
import { elAert } from '../../../utils/index';

const data = ref([{
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}, {
  a: '12312313'
}])


// 带斑马纹表格
const ZebraPrintOpt = ref<YsTableOption>({
  stripe: true,
  border: false,
  // index: false
})
// 带状态表格
const StatusOpt:YsTableOption = {
  // menu: false,
  stripe: true,
  rowClassName: ({ rowIndex }) => {
    if (rowIndex === 1) {
      return 'warning-row'
    } else if (rowIndex === 3) {
      return 'success-row'
    }
    return ''
  }
}

const page = ref<YsPageType>({
  total: 100,
  currentPage: 1,
  pageSize: 20
}) as Ref<YsPageType>


const column = computed<YsTableColumn[]>(() => {
  return [
    { label: '数据库名称', prop: 'a', width: '100px', showOverflowTooltip: true },
    { label: '数据表名称', prop: 'tableName' },
    { label: '表中文名称', prop: 'tableChName' },
    { label: '产品线', prop: 'productName' },
    { label: '主题域', prop: 'domainName' },
    { label: '创建时间', prop: 'createTime' },
    { label: '创建人', prop: 'createBy' }
  ]
})



const rowAdd = () => elAert('新增')

const rowEdit = () => elAert('编辑')

const rowDel = () => elAert('删除')

const currentChange = (val) => elAert(`currentChange => currentPage:${val}`)

const sizeChange = (val) => elAert(`sizeChange => pageSize:${val}`)

</script>

<style lang="scss" scoped>

</style>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>